{extend name='main'}

{block name="button"}

<!--{if auth("add")}-->
<button data-modal='{:url("add")}' data-title="添加权限" class='layui-btn layui-btn-sm layui-btn-primary'>添加地区</button>
<!--{/if}-->
{/block}

{block name="content"}
<style>
    .toggle.active {
        display: block;
    }
    .toggle.unactive {
        display: none;
    }
    .no-pad /deep/ .layui-table td, .layui-table th{
        padding: 0;
    }
</style>

<div class="think-box-shadow">
    <table class="layui-table margin-top-10" lay-skin="line">
        {notempty name='list'}
        <thead>
        <tr>
            <th class='list-table-check-td think-checkbox'>
                <label><input data-auto-none data-check-target='.list-check-box' type='checkbox'></label>
            </th>
            <th class='text-center'>序号</th>
            <th class='text-center'>省份</th>
            <th class='text-center'>城市</th>
            <th class='text-center'>地区</th>
            <th class='text-center' >操作</th>
        </tr>
        </thead>
        {/notempty}
        <tbody>
        {volist name="list" id="vo"}
        <tr data-dbclick class="city-list" id="city-list">
            <td class='list-table-check-td think-checkbox'>
                <label><input class="list-check-box" value='' type='checkbox'></label>
            </td>
            <td class='text-center text-id'>{$vo.id}</td>
            <td class='text-center text-province'>{$vo.name|default='-'}</td>
            <td class='text-center text-city'>-</td>
            <td class='text-center text-area'>-</td>
            <td class='text-center'>
                <a class="layui-btn layui-btn-normal  layui-btn-xs" value="{$vo.id}" onclick="getlist(this,2)" data-auto="un">查 看</a>
                <a class="layui-btn  layui-btn-xs" data-modal='{:url("edit")}?id={$vo.id}'>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" data-confirm="确定要删除地区吗?"
                   data-action="{:url('remove')}" data-value="id#{$vo.id}" data-csrf="{:systoken('remove')}">删 除</a>
            </td>
        </tr>

        {/volist}
        </tbody>
    </table>
    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
</div>
<script>
    function getlist(which,level_type) {
        var url = '{:url("getCityList")}';
        var level_type = level_type;
        var parent_id = $(which).attr("value");
        var status = $(which).attr("data-auto") == 'un' ? 'un' : 'down';

        if(status == 'un'){
            $.ajax({
                type: 'POST',
                url: url,
                dataType: "json",
                data: {"level_type": level_type,"parent_id":parent_id},
                success:function(msg){
                    if(msg.code==200){
                        // console.log(msg)
                        var data = msg.data;
                        var html = [];
                        var htmls = '<tr><td colspan="6" class="text-center"><table class="layui-table margin-top-10">'
                        $.each(data, function (index, value) {
                            html.push(`<tr>
                                <td class="list-table-check-td think-checkbox">
                                <label><input class="list-check-box" value="" type="checkbox"></label>
                                </td>
                                <td class="text-center">${value.id}</td>
                                <td class="text-center">-</td>
                                <td class="text-center">${value.name}</td>
                                <td class="text-center">-</td>
                                <td class="text-center">
                                <a class="layui-btn layui-btn-normal  layui-btn-xs" value="${value.id}" onclick="getlist(this,3)" data-auto="un">查 看</a>
                                <a class="layui-btn  layui-btn-xs" data-modal='{:url("edit")}?id=${value.id}'>编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" data-confirm="确定要删除地区吗?"
                   data-action="{:url('remove')}" data-value="id#${value.id}" data-csrf="{:systoken('remove')}">删 除</a>
                                </td>
                                </tr>`)
                        })
                        htmls = htmls + html.join('') + '</table></td></tr>';
                        console.log(htmls)
                        $(which).parent().parent().after(htmls);
                        $(which).attr("data-auto","down");
                        $(which).html("收起");
                    }

                }
            })
        }else{
            var pe = $(which).parent().parent().next();
            console.log(pe);
            pe[0].style.display = 'none';

            $(which).attr("data-auto","un");
            $(which).html("查看");
        }

    }
</script>
{/block}